<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="CSSDzy.css">
    
</head>
<body>
    <header>
        <div class="header-QQ">
        <img src="../前端开发/demo/imgs/qqmusic.png">
        </div>
    </header>
         <main>
        <!-- 歌单推荐区域 -->
        <section class="playlist-section">
            <h2 class="section-title" style="text-align: center;">歌单推荐</h2>
            
            <!-- 分类标签 -->
            <div class="tags">
                <span class="tag active">为你推荐</span>
                <span class="tag" >运动</span>
                <span class="tag" >网络歌曲</span>
                <span class="tag" >思念</span>
                <span class="tag" >官方歌单</span>
                <span class="tag" >情歌</span>
            </div>
            <div class="playlist-container">
                <div class="playlist-card">
                    <img src="http://qpic.y.qq.com/music_cover/8HhavvWNIicpyjlv0UnT5TWLRxhfmGTVwYtiaWd54wZItUPRu7486Fqw/300?n=1" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">翻唱女神J.Fla | 只唱你最爱的旋律</div>
                        <div class="playlist-playcount">891.4万</div>
                    </div>
                </div>
                <div class="playlist-card">
                    <img src="http://qpic.y.qq.com/music_cover/GUalk7A0sBGvkxmUrXIf7KnEVGJFicuoT7xSkZLHiaEMB5Ojbccf6cbA/300?n=1" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">古风女声控，优美旋律为你而来</div>
                        <div class="playlist-playcount">171.2万</div>
                    </div>
                </div>
                <div class="playlist-card">
                    <img src="http://qpic.y.qq.com/music_cover/QrmdXDG3R4jGSEzqu0qtR4vw6Glga0N83eKicVCib61BZw5lZtWEUMibQ/300?n=1" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">想开一家早餐店，叫“早点见面</div>
                        <div class="playlist-playcount">52.5万</div>
                    </div>
                </div>
                <div class="playlist-card">
                    <img src="http://qpic.y.qq.com/music_cover/R8unPZMA4Vp5v2Ms96bst9nFCfe4YPBFBADicMz2LB0kLfEiaUM4ymiag/300?n=1" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">好评999+英文歌！轻松解压100％</div>
                        <div class="playlist-playcount">12391.0万</div>
                    </div>
                </div>
                <div class="playlist-card">
                    <img src="http://qpic.y.qq.com/music_cover/IknB7UUG0ME0zalRpPKYjJiauia2kJzKs5gtKQY4Vq9TJYLXdjQK9fCA/300?n=1" class="playlist-img">
                    <div class="playlist-info">
                        <div class="playlist-name">书房背景乐 沉浸于字里行间的时光</div>
                        <div class="playlist-playcount">303.3万</div>
                    </div>
                </div>
            </div>
        </section>
        <section class="new-song-section">
            <h2 class="section-title" style="text-align: center;">新歌首发</h2>
            
            <!-- 分类标签 -->
            <span class="views" ><img src="../前端开发/前端开发素材库/images/imgs/icon_play.png">播放全部</span>
            <div class="tags">
                <span class="tag active">最新</span>
                <span class="tag" >内地</span>
                <span class="tag" >港台</span>
                <span class="tag" >欧美</span>
                <span class="tag" >韩国</span>
                <span class="tag" >日本</span>
            </div>
            <div class="song-list">
                <!--1-->
                <div class="song-item">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002myPA84G7kxG_1.jpg" class="song-img">
                    <div class="song-info">
                        <div class="song-name">Sabotage</div>
                        <div class="song-singer">"Bebe Rexha</div>
                    </div>
                    <div class="song-duration">02:56</div>
                </div>
                <div class="song-item">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003UIhdS4fBLqU_1.jpg" class="song-img">
                    <div class="song-info">
                        <div class="song-name">如果人人爱音乐</div>
                        <div class="song-singer">张蔷</div>
                    </div>
                    <div class="song-duration">03:46</div>
                </div>
                <div class="song-item">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002v6ztM40D0iP_1.jpg" class="song-img">
                    <div class="song-info">
                        <div class="song-name">你就不要想起我</div>
                        <div class="song-singer">R1SE赵磊</div>
                    </div>
                    <div class="song-duration">04:30</div>
                </div>
                <!--2-->
                <div class="song-item">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000005wEOc07Udwu_1.jpg" class="song-img">
                    <div class="song-info">
                        <div class="song-name">软肋</div>
                        <div class="song-singer">李宇春</div>
                    </div>
                    <div class="song-duration">04:17</div>
                </div>
                <div class="song-item">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003vGVIq243Mzm_2.jpg" class="song-img">
                    <div class="song-info">
                        <div class="song-name">一爱如故《长歌行》电视剧插曲</div>
                        <div class="song-singer">摩登兄弟刘宇宁</div>
                    </div>
                    <div class="song-duration">03:55</div>
                </div>
                <div class="song-item">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000hNAwr4dbutH_1.jpg" class="song-img">
                    <div class="song-info">
                        <div class="song-name">向宿命挥拳的人《新斗罗大陆》手游戴沐白角色曲</div>
                        <div class="song-singer">阿云嘎</div>
                    </div>
                    <div class="song-duration">04:00</div>
                </div>
                <!--3-->
                <div class="song-item">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000dcpok0A8RP3_2.jpg" class="song-img">
                    <div class="song-info">
                        <div class="song-name">花好月圆</div>
                        <div class="song-singer">周迅</div>
                    </div>
                    <div class="song-duration">02:34</div>
                </div>
                <div class="song-item">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000004X1Kbg34UHQ5_1.jpg" class="song-img">
                    <div class="song-info">
                        <div class="song-name">Renegades《浪客剑心 最终章》电影主题曲</div>
                        <div class="song-singer">ONE OK ROCK</div>
                    </div>
                    <div class="song-duration">04:04</div>
                </div>
                <div class="song-item">
                    <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000018mpfj0lSvS0_1.jpg" class="song-img">
                    <div class="song-info">
                        <div class="song-name">驯化者</div>
                        <div class="song-singer">陈俊豪/陈誉庚/TGM-姜京佐/刘冠佑/罗一舟/唐九洲/G.G张思源</div>
                    </div>
                    <div class="song-duration">03:28</div>
                </div>
            </div>
        </section>
        <section class="MV-section">
             <h2 class="section-title" style="text-align: center;">MV</h2>
            <!-- 分类标签 -->
            <div class="tags">
                <span class="tag active">最新</span>
                <span class="tag" >内地</span>
                <span class="tag" >港台</span>
                <span class="tag" >欧美</span>
                <span class="tag" >韩国</span>
                <span class="tag" >日本</span>
            </div>
            <div class="playlist-container">
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M102000SY7kU0vIuoT.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">向宿命挥拳的人 (《新斗罗大陆》手游戴沐白角色曲)</div>
                        <div class="MV-singer">阿云嘎</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">8802
                        </div>
                    </div>
                </div>
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M000003vHDbe24Jqpl.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">雨</div>
                        <div class="MV-singer">Sunnee杨芸晴</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">3334
                        </div>
                    </div>
                </div>
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M1010047OlaH3P3f0J.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">一爱如故 (《长歌行》电视剧插曲)</div>
                        <div class="MV-singer">摩登兄弟刘宇宁</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">4.2万
                        </div>
                    </div>
                </div>
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101002cYg662xvSlL.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">我很好骗</div>
                        <div class="MV-singer">动力火车</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">1.1万
                        </div>
                    </div>
                </div>
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101001YVtJL2sr2Z7.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">造梦时学会飞行 (《声梦传奇》主题曲)</div>
                        <div class="MV-singer">TVB</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">1483
                        </div>
                    </div>
                </div>
            </div>
        <div class="playlist-container">
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003RlAau1dFne3.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">What's Wrong With Me (Punk Version)</div>
                        <div class="MV-singer">Lil Ghost小鬼</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">20.2万
                        </div>
                    </div>
                </div>
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M102003c3tSe1ehWwN.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">Let's Party (《和平精英》2周年庆派对邀请曲)</div>
                        <div class="MV-singer">吴宣仪</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">6.6万
                        </div>
                    </div>
                </div>
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M0000013X2t31kvJC4.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">鋼の羽根</div>
                        <div class="MV-singer">RADWIMPS</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">2861
                        </div>
                    </div>
                </div>
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003aYDEH2kWTX7.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">에필로그 (epilogue)</div>
                        <div class="MV-singer">IU</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">7955
                        </div>
                    </div>
                </div>
                <div class="MV-card">
                    <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101000xHMCS1g3sSW.jpg" class="MV-img">
                    <div class="MV-info">
                        <div class="MV-name">圭贤《Coffee》MV</div>
                        <div class="MV-singer">圭贤</div>
                        <div class="MV-views">
                            <img src="../前端开发/demo/imgs/icon_listen.png">1.5万
                        </div>
                    </div>
                </div>
            </div>
        </section>
</body>
</html>